<div class="secpc">
    <el-row class="consume-panel" style="padding-bottom: 0px">
        <el-col :span="3" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #862197" >当日进港：</span>
            <span style="font-size: 14px;color: #862197">15</span>
        </el-col>
        <el-col :span="3" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #24f818">当日出港：</span>
            <span style="font-size: 14px;color: #24f818">15</span>
        </el-col>
        <el-col :span="3" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #e6e854">正在保障：</span>
            <span style="font-size: 14px;color: #e6e854">15</span>
        </el-col>
        <el-col :span="3" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #96c2ff">地服：</span>
            <span style="font-size: 14px;color: #96c2ff">15</span>
        </el-col>
        <el-col :span="5" style="margin-top: 10px;">
            <span style="font-size: 14px;color: #f264e0">保障车辆使用数量：</span>
            <span style="font-size: 14px;color: #f264e0">15</span>
        </el-col>
        <el-col :span="7">

            <el-form :inline="true" ref="form" :model="form" label-position="left" label-width="100px">
                <el-form-item label=""  prop="flightInfo.flightInfoId":rules
                        ="[ {required: false, message: '航班号不能为空'}]">
                    <el-select clearable  v-model="form.flightInfo.flightInfoId" filterable placeholder="航班号"   >
                        <el-option
                                v-for="plane in planes"
                                :key="plane.flightInfoId"
                                :label="plane.flightNum"
                                :value="plane.flightInfoId"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="">
                    <el-button type="primary" @click="findFlightPlan">查询</el-button>
                </el-form-item>
            </el-form>

        </el-col>
    </el-row>
    <div class="consume-panel" style="padding-left: 0px;margin-left: 0px ">
        <el-row>
            <el-col :span="24">
                <div>
                    <el-row class="status">
                        <el-col :span="2" class="text" style="color: #f36b95;">延误</el-col>
                        <el-col :span="3" class="color" style="background-color: #f36b95;"></el-col>
                        <el-col :span="2" class="text" style="color: #e6e854;">远机位</el-col>
                        <el-col :span="3" class="color" style="background-color: #e6e854;"></el-col>
                        <el-col :span="2" class="text" style="color: #4fbdc7;">更换信息</el-col>
                        <el-col :span="3" class="color" style="background-color: #4fbdc7;"></el-col>
                        <el-col :span="2" class="text" style="color: #61f371;">保障成功</el-col>
                        <el-col :span="3" class="color" style="background-color: #61f371;"></el-col>
                    </el-row>
                </div>
            </el-col>
        </el-row>

    </div>
    <!--进港-->
    <div class="consume-panel">
    <el-row><span style="font-size: 14px;color: #11c4ff;font-weight: bold;">进港</span></el-row>
    <el-table
            ref="secpcInTable"
            :data="secpcInData"
            border
            :cell-class-name="cellStyle"
            one-screen
            layout="total, sizes, prev, pager, next, jumper"
    >
        <el-table-column prop="flightInfo.flightNum"  label="航班号" min-width="80" >
        </el-table-column>
        <el-table-column prop="flightInfo.flightNo" label="机号" min-width="80">
        </el-table-column>
        <el-table-column prop="gatePosition" label="机位" min-width="50">
        </el-table-column>
        <el-table-column  label="预落" min-width="58">
            <template scope="scope">
                                <span>
                                    {{scope.row.arriveTime?scope.row.arriveTime.substr(11,5):""}}
                                </span>
            </template>
        </el-table-column>
        <el-table-column prop="vehicleState" label="值机人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="旅客人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="地服人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="保障车数量" min-width="58">
        </el-table-column>
        <el-table-column label="登机口到位">
            <template scope="scope">
                <el-row>
                    <el-col :spam="6" class="stateColor1" ></el-col>
                    <el-col :spam="6" class="stateColor2" ></el-col>
                    <el-col :spam="12" class="stateColor3" ></el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="机坪到位">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="航班落地">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24"class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="下客结束">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="登机口释放">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="机坪人员释放">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
    </div>
    <!--出港-->
        <div class="consume-panel">
    <el-row >
        <span  style="font-size: 14px;color: #11c4ff;font-weight: bold;">出港</span></el-row>
    <el-table
            ref="secpcOutTable"
            :data="secpcOutInData"
            border
            :cell-class-name="cellStyle"
            one-screen
            layout="total, sizes, prev, pager, next, jumper"
    >
        <el-table-column prop="flightInfo.flightNum"  label="航班号" min-width="80" >
        </el-table-column>
        <el-table-column prop="flightInfo.flightNo" label="机号" min-width="80">
        </el-table-column>
        <el-table-column prop="gatePosition" label="机位" min-width="50">
        </el-table-column>
        <el-table-column  label="预起" min-width="58">
            <template scope="scope">
                                <span>
                                    {{scope.row.takeOffTime?scope.row.takeOffTime.substr(11,5):""}}
                                </span>
            </template>
        </el-table-column>
        <el-table-column prop="vehicleState" label="值机人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="登机人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="地服人数" min-width="50">
        </el-table-column>
        <el-table-column prop="vehicleState" label="保障车数量" min-width="58">
        </el-table-column>
        <el-table-column prop="boardingGateDone" label="登机口到位">
            <template scope="scope">
                                   <el-row>
                                       <el-col :spam="6"  class="stateColor1"></el-col>
                                       <el-col :spam="6"  class="stateColor2"></el-col>
                                       <el-col :spam="12"  class="stateColor3"></el-col>
                                   </el-row>
            </template>
        </el-table-column>
        <el-table-column label="机坪到位">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="登机开始">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="关闭舱门">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="登机口释放">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
        <el-table-column  label="机坪人员释放">
            <template scope="scope">
                <el-row>
                    <el-col :spam="24" class="stateColor">
                    </el-col>
                </el-row>
            </template>
        </el-table-column>
    </el-table>
        </div>


</div>